<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <span class="table-title">今日数据</span>
            </div>
            <div class="welcome-list">
                <div>
                    <p class="welcome-title">新增用户</p>
                    <p class="welcome-blue">{{indexList.today_register_user}}</p>
                </div>
                <div>
                    <p class="welcome-title">充值用户</p>
                    <p class="welcome-blue">{{indexList.today_charge_user}}</p>
                </div>
                <div>
                    <p class="welcome-title">充值订单</p>
                    <p class="welcome-blue">{{indexList.today_charge_num}}</p>
                </div>
                <div>
                    <p class="welcome-title">充值金额</p>
                    <p class="welcome-blue">￥{{indexList.today_charge_money}}</p>
                </div>
                <div>
                    <p class="welcome-title">提现用户</p>
                    <p class="welcome-blue">{{indexList.today_withdraw_user}}</p>
                </div>
                <div>
                    <p class="welcome-title">提现订单</p>
                    <p class="welcome-blue">{{indexList.today_withdraw_num}}</p>
                </div>
                <div>
                    <p class="welcome-title">提现金额</p>
                    <p class="welcome-blue">{{indexList.today_withdraw_money}}</p>
                </div>
            </div>
        </el-card>
        <el-card>
            <div slot="header" class="clearfix">
                <span class="table-title">数据总览</span>
            </div>
            <div class="welcome-list">
                <div>
                    <p class="welcome-title">总用户数</p>
                    <p class="welcome-blue">{{indexList.total_register_user}}</p>
                </div>
                <div>
                    <p class="welcome-title">充值用户</p>
                    <p class="welcome-blue">{{indexList.total_charge_user}}</p>
                </div>
                <div>
                    <p class="welcome-title">充值订单</p>
                    <p class="welcome-blue">{{indexList.total_charge_num}}</p>
                </div>
                <div>
                    <p class="welcome-title">充值金额</p>
                    <p class="welcome-blue">￥{{indexList.total_charge_money}}</p>
                </div>
                <div>
                    <p class="welcome-title">提现用户</p>
                    <p class="welcome-blue">{{indexList.total_withdraw_user}}</p>
                </div>
                <div>
                    <p class="welcome-title">提现订单</p>
                    <p class="welcome-blue">{{indexList.total_withdraw_num}}</p>
                </div>
                <div>
                    <p class="welcome-title">提现金额</p>
                    <p class="welcome-blue">{{indexList.total_withdraw_money}}</p>
                </div>
            </div>
        </el-card>
        <div class="eacharts-box">
            <el-card>
                <div slot="header" class="clearfix">
                    <span class="table-title">新增用户数据</span>
                </div>
                <div ref="main" class="echarts"></div>
            </el-card>
            <el-card>
                <div slot="header" class="clearfix">
                    <span class="table-title">充值数据</span>
                </div>
                <div ref="bar" class="echarts"></div>
            </el-card>
        </div>

        <el-card>
            <div slot="header" class="clearfix">
                <span class="table-title">最近一个月数据统计</span>
            </div>
            <el-table
                    size="small"
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="charge_money"
                        label="充值金额">
                </el-table-column>
                <el-table-column
                        width="150"
                        label="充值订单数">
                    <template slot-scope="scope">
                        <p>{{scope.row.charge_total_num}}笔</p>
                        <p>{{scope.row.charge_pay_num}} 笔支付, 完成率: {{scope.row.charge_rate}}%</p>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="withdraw_money"
                        label="提现金额">
                </el-table-column>
                <el-table-column
                        prop="withdraw_num"
                        label="提现订单数">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
  export default {
    name: "Welcome",
    data() {
      return {
        tableData: [],
        indexList: [],
      }
    },
    mounted() {
      this.PostIndex()

    },
    methods: {
      PostIndex() {
        this.$axios.post('admin/main/index')
          .then(res => {
            console.log(res.data);
            this.indexList = res.data
            this.tableData = res.data.use_withdraw_charge_data
            this.getList(res.data.user_register_data)
            this.barClick(res.data.user_charge_data)
          })
      },

      // 折线图
      getList(e) {
        var date = []
        var H5_data = []
        var iOS_data = []
        var Android_data = []
        e.forEach(item => {
          date.push(item.date)
          H5_data.push(item.pc)
          iOS_data.push(item.iOS)
          Android_data.push(item.Android)
        })
        var myChart = this.$echarts.init(this.$refs.main);
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'Android',
              type: 'line',
              data: Android_data,
            },
            {
              name: 'iOS',
              type: 'line',
              data: iOS_data
            },
            {
              name: 'PC',
              type: 'line',
              data: H5_data
            },
          ]
        };
        myChart.setOption(option);
      },
      // 曲线图
      barClick(e) {
        var date = []
        var H5_data = []
        var iOS_data = []
        var Android_data = []
        e.forEach(item => {
          date.push(item.date)
          H5_data.push(item.pc)
          iOS_data.push(item.iOS)
          Android_data.push(item.Android)
        })
        var myChart = this.$echarts.init(this.$refs.bar);
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'Android',
              type: 'line',
              smooth: true,
              data: Android_data,
            },
            {
              name: 'iOS',
              type: 'line',
              smooth: true,
              data: iOS_data
            },
            {
              name: 'PC',
              type: 'line',
              smooth: true,
              data: H5_data
            },
          ]
        };

        myChart.setOption(option);
      }

    }
  }
</script>

<style scoped lang="less">
    @media screen and (max-width: 750px) {
        .welcome-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;

            > div {
                text-align: center;
                width: 100px;
                margin-bottom: 20px;
            }
        }

        .eacharts-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .el-card {
                width: 100%;
            }
        }
    }

    @media screen and (min-width: 750px) {
        .welcome-list {
            display: flex;
            align-items: center;
            justify-content: space-between;

            > div {
                text-align: center;
                width: 14%;
            }
        }

        .eacharts-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .el-card {
                width: 49%;
            }
        }
    }

    .table-title {
        font-weight: bold;
        font-size: 18px;
    }

    .echarts {
        height: 300px;
        width: 100%;
    }


    .welcome-title {
        font-size: 20px;
        margin-bottom: 25px;
        color: #0A1C33;
    }

    .welcome-blue {
        color: #409EFF;
        font-size: 26px;
    }
</style>